<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>Hello</h1>
          <h2>欢迎来到天智BI</h2>
          <el-form-item prop="username">
            <el-input type="text" :prefix-icon="User" v-model="loginForm.username"  placeholder="输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password>输入密码</el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" :loading="loading" size="default" class="login_btn" @click="login">登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {User, Lock} from '@element-plus/icons-vue';
import {ElNotification} from "element-plus";
//import pinia from "@/stores/index.js";


import {useUserStore} from "@/stores/modules/userStore.ts";
let loginForms=ref();
const userStore = useUserStore();
import {reactive, ref} from "vue";

import {useRouter,useRoute} from "vue-router";

import {getTime} from "@/utils/timeUtils.ts";

let $router = useRouter();
let $route=useRoute();
let loading = ref(false);
let loginForm = reactive({username: "admin",  password: "111111"});

const login = async () => {

    await loginForms.value.validate();
    loading.value = true;
  try {
    await userStore.userLogin(loginForm);
    let redirect = $route.query.redirect;
    $router.push({path:redirect||'/'});
    ElNotification({
      type: "success",
      message: "欢迎回来",
      title: `Hi，${getTime()}好`
    })
    loading.value = false

  } catch (error) {
     $router.push("/404");
    ElNotification({
      type: "error",
      message: error.message
    })
    loading.value = false
  }
}
const validatorUserName=(rule,value,callback)=>{
 if (value.length >=5 ){
  // if(/^d{5,10}$/.test(value)){
    callback();
  }else{
    callback(new Error('账号长度至少5位'));
  }
}
const validatorPassowrd=(rule,value,callback)=>{
  if (value.length >=6 ){
    // if(/^d{5,10}$/.test(value)){
    callback();
  }else{
    callback(new Error('密码长度至少6位'));
  }
}
const rules = reactive({
  username:[
   // {required:true,min:5,max:10,message:"账号长度至少6为",trigger: 'change'}
    {trigger:'change',validator:validatorUserName}
  ],
  password:[
    {trigger: 'change',validator:validatorPassowrd}

  ]
})
</script>

<style scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url("../../assets/images/xzreport/tizdata1.png") no-repeat;
  background-size: cover;
}

.login_form {
  position: relative;
  width: 80%;
  top: 30vh;
  background: url("../../assets/images/xzreport/login_form.png") no-repeat;
  background-size: cover;
  padding: 40px;

  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    color: white;
    font-size: 20px;
    margin: 20px 0px;
  }

  .login_btn {
    width: 100%;
  }
}


</style>